<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css?v=2020031412" />
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="./js/iconfont.js"></script>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<title></title>
		<style>
			body {
			/* background-color: #203CF4; */
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}	
		
		.svg-piple{
			fill:none;stroke:white;stroke-width:10
		}
		
		.svg_text{
			text-align: center;
		}
		
		
		.water-piple{
			background-color: #FFFFFF;
			height: 10px;
		}
		
	</style>

	</head>

	<body>
		<svg aria-hidden="true" style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
			<symbol id="icon-beng-1" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/beng_1.png" />
			</symbol>
			<symbol id="icon-beng-2" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/beng_2.png" />
			</symbol>
			<symbol id="icon-beng-3" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/beng_3.png" />
			</symbol>
			<symbol id="icon-dianci" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/dianci.png" />
			</symbol>
			<symbol id="icon-p-2-dr" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_dr.png" />
			</symbol>
			<symbol id="icon-p-2-ld" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_ld.png" />
			</symbol>
			<symbol id="icon-p-2-lu" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_lu.png" />
			</symbol>
			<symbol id="icon-p-2-ur" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_2_ur.png" />
			</symbol>
			<symbol id="icon-p-3-d" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_3_d.png" />
			</symbol>
			<symbol id="icon-p-3-l" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_3_l.png" />
			</symbol>
			<symbol id="icon-p-3-r" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_3_r.png" />
			</symbol>
			<symbol id="icon-p-4" viewBox="0 0 120 120">
				<image width="120" height="120" x="0" y="0" href="img/p_4.png" />
			</symbol>
			<symbol id="icon-water-ball" viewBox="0 0 200 200">
				<image width="200" height="200" x="0" y="0" href="img/water_ball.png" />
			</symbol>
			<symbol id="icon-press" viewBox="0 0 200 200">
				<image width="200" height="200" x="0" y="0" href="img/press.png" />
			</symbol>


			<g id="pool-box-up" viewBox="0 0 300 20">
				<line class="svg-piple" x1="0" y1="100" x2="300" y2="100" />
				<image width="200" height="200" x="50" y="10" href="img/water_ball.png" />
				<line class="svg-piple" x1="0" y1="95" x2="0" y2="220" />
				<line class="svg-piple" x1="300" y1="95" x2="300" y2="220" />
				<text id="rsll" class="svg_text" font-size="20" font-family="YouYuan" x="0" y="180" width="200" height="30">水泵</text>
			</g>

			<g id="pool-box-middle" viewBox="0 0 300 20">
				<line class="svg-piple" x1="0" y1="100" x2="300" y2="100" />
				<image width="200" height="200" x="50" y="10" href="img/water_ball.png" />
				<line class="svg-piple" x1="0" y1="0" x2="0" y2="220" />
				<line class="svg-piple" x1="300" y1="0" x2="300" y2="220" />
			</g>

			<g id="pool-box-down" viewBox="0 0 300 20">
				<line class="svg-piple" x1="0" y1="100" x2="300" y2="100" />
				<image width="200" height="200" x="50" y="10" href="img/water_ball.png" />
				<line class="svg-piple" x1="0" y1="0" x2="0" y2="105" />
				<line class="svg-piple" x1="300" y1="0" x2="300" y2="105" />
			</g>

		</svg>



		<header class="sui-bar sui-bar-nav top-box" style="height: 85px;box-shadow: 0px 2px 1px rgba(0,0,0,0.5)">
			<!-- 	<div class="sui-pull-left">
				<img src="img/logo_white.png" style="height: 1.7rem;margin-left: 0.5rem;margin-top: 0.275rem;" />
			</div> -->
			<div class="sui-title" style="height: 85px; line-height: 85px;">智慧水务系统</div>

			<div class="sui-pull-right">
				<img src="img/menu.png" id="icon-menu" />
			</div>
		</header>

		<div class="sui-wrap back-box " id="datas" style="height: 100vh;width: 100vw;">
			<!-- <div class="sui-flex-col ">
				<div class="sui-content  sui-flex-col sui-flex-1" style="padding-left: 2%;">
					<svg id="svg_box" height="900" width="1200" viewBox="0,0,1200,900">
						<line  x1="0" y1="50%"  x2="10%" y2="50%" class="svg-piple" />
						
						<template v-for="(pool,index) in options.pools">
							
							<use x="10%" y="0" viewBox="0,0,300,220"  xlink:href="#pool-box-up" />	
							<use x="10%" y="200" viewBox="0,0,300,220" xlink:href="#pool-box-middle" />
							<use x="10%" y="400" viewBox="0,0,300,220" xlink:href="#pool-box-down" />
							
						</template>

						<div style="height: 25%;position: relative;">
							<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border:10px #FFFFFF solid;border-bottom: none;"></div>
							<img src="img/water_ball.png" style="width: 60%;z-index: 1;position: absolute; left:20%;top:0%;" />
							<p style="position: absolute; width: 100%;text-align: center;top:50%;color: #FFFFFF;z-index: 2;">50%</p>
							<p style="position: absolute;bottom:0%;color: #FFFFFF;z-index: 2;width: 100%;text-align: center;">1#清水池</p>
						</div>

					</svg>


				</div>
			</div> 

 -->

			<div class="sui-flex-col sui-flex-middle" style="height: 600px;width: 1000px;">
				<!-- 最左边短线加文字 -->
				<div style="width: 15%;position: relative;margin-top: -33%;">
					<p style="line-height: 30px;">出水管道瞬时流量: 0L</p>
					<p style="line-height: 30px;"> 进水压力: 0MP</p>
					<p class="water-piple" style="width: 100%;margin-top: 10px;"></p>
					<img src="img/p_3_l.png" style="position: absolute;bottom: -25px;right: -30px;width: 60px;z-index: 1;" />
				</div>

				<div style="width: 25%;height: 100%;">
					<!-- <template v-for="(pool,index) in options.pools"> -->
					<div style="height: 25%;position: relative;">
						<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border:10px #FFFFFF solid;border-bottom: none;"></div>
						<img src="img/water_ball.png" style="height: 120%;position: relative; margin:auto auto ;" />
						<img src="img/p_2_dr.png" style="position: absolute;top: 50%;left: -20px;width: 60px;margin-top: -20px;" />
						<img src="img/p_2_ld.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -20px;" />
						<p style="position: absolute; width: 100%;text-align: center;top:50%;color: #FFFFFF;z-index: 2;">50%</p>
						<p style="position: absolute;bottom:0%;color: #FFFFFF;z-index: 2;width: 100%;text-align: center;">1#清水池</p>
					</div>

					<div style="height: 25%;position: relative; border-left:10px #FFFFFF solid ; border-right:10px #FFFFFF solid ; ">
						<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border-top:10px #FFFFFF solid;"></div>
						<img src="img/water_ball.png" style="height: 120%;position: relative; margin:auto auto ;" />
						<p style="position: absolute; width: 100%;text-align: center;top:50%;color: #FFFFFF;z-index: 2;">50%</p>
						<p style="position: absolute;bottom:0%;color: #FFFFFF;z-index: 2;width: 100%;text-align: center;">1#清水池</p>

						<img src="img/p_3_r.png" style="position: absolute;top: 50%;left: -30px;width: 60px;margin-top: -25px;" />
						<img src="img/p_3_l.png" style="position: absolute;top: 50%;right: -30px;width: 60px;margin-top: -25px;" />


					</div>

					<div style="height: 25%;position: relative; border-left:10px #FFFFFF solid ; border-right:10px #FFFFFF solid ; ">
						<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border-top:10px #FFFFFF solid;"></div>
						<img src="img/water_ball.png" style="height: 120%;position: relative; margin:auto auto ;" />
						<p style="position: absolute; width: 100%;text-align: center;top:50%;color: #FFFFFF;z-index: 2;">50%</p>
						<p style="position: absolute;bottom:0%;color: #FFFFFF;z-index: 2;width: 100%;text-align: center;">1#清水池</p>

						<img src="img/p_3_r.png" style="position: absolute;top: 50%;left: -30px;width: 60px;margin-top: -25px;" />
						<img src="img/p_3_l.png" style="position: absolute;top: 50%;right: -30px;width: 60px;margin-top: -25px;" />
					</div>

					<div style="height: 25%;position: relative;">
						
						<img src="img/water_ball.png" style="height: 120%;position: relative; margin:auto auto ;" />
						<p style="position: absolute; width: 100%;text-align: center;top:50%;color: #FFFFFF;z-index: 2;">50%</p>
						<p style="position: absolute;bottom:0%;color: #FFFFFF;z-index: 2;width: 100%;text-align: center;">1#清水池</p>

						<div style="position: absolute;top:0px;bottom: 50%;width: 100%;border:10px #FFFFFF solid;border-top: none;"></div>
						<img src="img/p_2_ur.png" style="position: absolute;top: 50%;left: -20px;width: 60px;margin-top: -40px;" />
						<img src="img/p_2_lu.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -40px;" />
					</div>



					<!-- </template> -->
				</div>

				<div style="width: 10%;position: relative;margin-top: 30%;">
					<p class="water-piple" style="width: 100%;"></p>
					<img src="img/p_3_r.png" style="width: 50px;position: absolute;top: 0;left: -25px; margin-top: -20px;z-index: 1;" />
				</div>

				<div style="width: 40%;height: 100%;">
					<div style="height: 25%;position: relative;">
						<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border:10px #FFFFFF solid;border-bottom: none;"></div>
						<img src="img/p_2_dr.png" style="position: absolute;top: 50%;left: -20px;width: 60px;margin-top: -20px;" />
						<img src="img/p_2_ld.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -20px;" />
						<img src="img/beng_1.png" style="position: absolute;left: 10%;bottom:35%; height: 50%;z-index:2;" />
						<div style="width: 100px;position: absolute;left: 10%;top: 65%;">
							<p style="color: #FFFFFF;z-index: 2;width: 100px;text-align: center;">1#清水池</p>
						</div>
					</div>

					<div style="height: 25%;position: relative; border-left:10px #FFFFFF solid ; border-right:10px #FFFFFF solid ; ">
						<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border-top:10px #FFFFFF solid;"></div>
						<img src="img/beng_1.png" style="position: absolute;left: 10%;bottom:35%; height: 50%;z-index:2;" />
						<div style="width: 100px;position: absolute;left: 10%;top: 65%;">
							<p style="color: #FFFFFF;z-index: 2;width: 100px;text-align: center;">1#清水池</p>
						</div>

						<img src="img/p_3_r.png" style="position: absolute;top: 50%;left: -30px;width: 60px;margin-top: -25px;" />
						<img src="img/p_3_l.png" style="position: absolute;top: 50%;right: -30px;width: 60px;margin-top: -25px;" />
					</div>

					<div style="height: 25%;position: relative; border-left:10px #FFFFFF solid ; border-right:10px #FFFFFF solid ; ">
						<div style="position: absolute;top:50%;bottom: 0px;width: 100%;border-top:10px #FFFFFF solid;"></div>
						<img src="img/beng_1.png" style="position: absolute;left: 10%;bottom:35%; height: 50%;z-index:2;" />
						<div style="width: 100px;position: absolute;left: 10%;top: 65%;">
							<p style="color: #FFFFFF;z-index: 2;width: 100px;text-align: center;">1#清水池</p>
						</div>

						<img src="img/p_3_r.png" style="position: absolute;top: 50%;left: -30px;width: 60px;margin-top: -25px;" />
						<img src="img/p_3_l.png" style="position: absolute;top: 50%;right: -30px;width: 60px;margin-top: -25px;" />
					</div>

					<div style="height: 25%;position: relative;">
						<div style="position: absolute;top:0px;bottom: 50%;width: 100%;border:10px #FFFFFF solid;border-top: none;"></div>
						<img src="img/beng_1.png" style="position: absolute;left: 10%;bottom:35%; height: 50%;z-index:2;" />
						<div style="width: 100px;position: absolute;left: 10%;top: 65%;">
							<p style="color: #FFFFFF;z-index: 2;width: 100px;text-align: center;">1#清水池</p>
						</div>




						<img src="img/p_2_ur.png" style="position: absolute;top: 50%;left: -20px;width: 60px;margin-top: -40px;" />
						<img src="img/p_2_lu.png" style="position: absolute;top: 50%;right: -20px;width: 60px;margin-top: -40px;" />
					</div>



				</div>

				<div style="width: 10%;position: relative;margin-bottom: 20%;">
					<p class="water-piple" style="width: 100%;"></p>
					<img src="img/p_3_r.png" style="width: 50px;position: absolute;bottom: 0;left: -25px; margin-bottom: -20px;z-index: 1;" />

				</div>


			</div>
		</div>


		<script type="application/javascript" src="lib/sui.js"></script>
		<!-- <script type="application/javascript" src="lib/sui-accordion.js"></script> -->
		<script type="application/javascript" src="lib/vue.min.js"></script>
		<script type="application/javascript" src="js/common.js"></script>
		<script type="application/javascript" src="./js/api.js"></script>
		<script type="application/javascript" src="lib/sui-popup.js"></script>
		<script type="application/javascript" src="js/menu.js?v=202003051"></script>





	</body>

	<script type="text/javascript">
		sui.ready(function() {
			//setSvg(0.6);
		})

		//按照比例设置svg图片宽度,高度随着宽度自动设置
		function setSvg(pre) {
			var clientWidth = document.documentElement.clientWidth,
				clientHeight = document.documentElement.clientHeight;

			var svg = document.querySelector('#svg_box');
			var viewBoxVal = svg.getAttribute("viewBox");
			console.log("viewBoxVal:" + viewBoxVal);
			var viewBoxWidth = viewBoxVal.split(",")[2];
			var viewBoxHeight = viewBoxVal.split(",")[3];

			console.log("viewBoxWidth:" + viewBoxWidth);
			console.log("viewBoxHeight:" + viewBoxHeight);

			var setWidth = clientWidth * pre;
			var setHeight = setWidth * viewBoxHeight / viewBoxWidth;

			console.log("newBoxWidth:" + setWidth);
			console.log("newBoxHeight:" + setHeight);
			svg.setAttribute("width", setWidth);
			svg.setAttribute("height", setHeight);
		}



		var vm = new Vue({
			el: "#datas",
			data: {
				options: {
					room:{
						flow: "24ML",//出水管道瞬时流量
						press:"55L"//进水压力
					},
					pools: [{
							id: 1,
							name: "1#清水池",
						}, {
							id: 2,
							name: "2#清水池",
						},

					],
					pumps: []
				}
			},
			mounted: function() {
				var _self = this;
				setTimeout(function() {
					_self.showTest = true;
				}, 3000);
			},
			methods: {

			}


		})
	</script>

</html>
